<template>
  <div id="e1">
    <div id="e2">
      教育经历管理
      <button :style="getstyle" @click="tome">增加</button>
    </div>
    <table id="e1">
      <thead>
        <tr class="e2">
          <th>序号</th>
          <th>状态</th>
          <th>学历类型</th>
          <th>开始日期</th>
          <th>结束日期</th>
          <th>学校名称</th>
          <th>专业名称</th>
          <th>干部名称</th>
          <th>获奖证书</th>
          <th>证明人</th>
          <th>联系电话</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item1 in jl" :key="item1" class="e2">
          <th v-for="item2 in item1" :key="item2" class="e3">{{ item2 }}</th>
        </tr>
      </tbody>
    </table>
    <div class="e6" v-if="xd">
      <ul>
        <li class="e7">
          学历类型:
          <select name="a" id="ss" v-model="platform2.xl">
            <option value="高中">高中</option>
            <option value="大学">大学</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
            <option value="博士后">博士后</option>
          </select>
          <!-- <input type="text" v-model.lazy="platform2"> -->
        </li>
        <li class="e7">
          开始日期:
          <input type="text" v-model.lazy="platform2.ks" />
        </li>
        <li class="e7">
          结束日期:
          <input type="text" v-model.lazy="platform2.js" />
        </li>
        <li class="e7">
          学校名称:
          <input type="text" v-model.lazy="platform2.xx" />
        </li>
        <li class="e7">
          专业名称:
          <input type="text" v-model.lazy="platform2.zy" />
        </li>
        <li class="e7">
          干部名称:
          <input type="text" v-model.lazy="platform2.gb" />
        </li>
        <li class="e7">
          获奖证书:
          <input type="text" v-model.lazy="platform2.hj" />
        </li>
        <li class="el1">
          证明人:
          <input type="text" v-model.lazy="platform2.zm" />
        </li>
        <li class="e7">
          联系电话:
          <input type="text" v-model.lazy="platform2.dh" />
        </li>
        <li class="el2">
          备注:
          <input type="text" v-model.lazy="platform2.bz" />
        </li>
        <li class="e9">
          <button @click="edto">保存</button>
          <button @click="edgo">取消</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Peducation",
  methods: {
    tome() {
      this.xd = true;
      this.x++;
    },
    edgo() {
      this.xd = false;
    },
    edto() {
      (this.xd = false),
        // this.platform2=this.platform,
        // this.jl.splice("0", "0", this.platform2),
         this.jl.push(this.platform2),
        (this.platform2.xh = this.x);
    },
  },
  data() {
    return {
      zw: "",
      xd: false,
      x: "3",
      platform2: {
        xh: "",
        zt: "在读",
        xl: "",
        ks: "",
        js: "",
        xx: "",
        zy: "",
        gb: "",
        hj: "",
        zm: "",
        dh: "",
        bz: "无",
      },
      jl: [
        {
          xh: "1",
          zt: "在读",
          xl: "大学",
          ks: "2018-9-10",
          js: "2022-6-10",
          xx: "河南师范大学",
          zy: "软件工程",
          gb: "无",
          hj: "无",
          zm: "佚名",
          dh: "15233690023",
          bz: "无",
        },
        {
          xh: "2",
          zt: "在读",
          xl: "大学",
          ks: "2018-9-10",
          js: "2022-6-10",
          xx: "河南师范大学",
          zy: "软件工程",
          gb: "无",
          hj: "无",
          zm: "佚名",
          dh: "15233690023",
          bz: "无",
        },
        {
          xh: "3",
          zt: "在读",
          xl: "大学",
          ks: "2018-9-10",
          js: "2022-6-10",
          xx: "河南师范大学",
          zy: "软件工程",
          gb: "无",
          hj: "无",
          zm: "佚名",
          dh: "15233690023",
          bz: "无",
        },
      ],
    };
  },
};
</script>

<style scoped>
#e1 {
  border: 1px soild rgba(204, 204, 192, 0);
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  width: 1050px;
}
.e2,
.e3 {
  padding: 8px 16px;
  border: 1px solid red;
  text-align: center;
}
.e2 > th {
  color: rgb(152, 152, 231);
  font-weight: 600;
  font-size: 18px;
  height: 45px;
  line-height: 45px;
  background-color: #f6f6f6;
  border: 1px solid red;
}
#e2 {
  text-align: center;
  height: 40px;
  font-size: 28px;
  line-height: 28px;
  margin-bottom: 10px;
  margin-top: -10px;
}
#e2 > button {
  height: 35px;
  font-size: 26px;
  line-height: 26px;
  margin-left: 110px;
}
.e6 {
  background-color: aquamarine;
  position: relative;
  top: -427px;
  left: -5px;
  width: 1030px;
  height: 600px;
  margin: 0 auto;
  /* display: none; */
}
.e6 ul > li {
  margin-top: 40px;
  margin-left: 45px;
  /* margin-right: 200px; */
  /* position: absolute; */
  float: left;
}
.e6 ul > .e7 {
  margin-left: 74px;
}
.e6 ul > .e8 {
  margin-left: 200px;
}
.e6 .e9 > button {
  width: 80px;
  margin-left: 200px;
}
.e6 ul > .el1 {
  margin-left: 88px;
}
.e6 ul > .el1 > input {
  width: 261px;
}
.e6 ul > .el2 {
  margin-left: 102px;
}
.e6 ul > .el2 > input {
  width: 261px;
}
#ss {
  width: 262px;
}
.e7 > input {
  width: 260px;
}
</style>
